<template>
	<view>
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: '#333333',
				backgroundColor: '#fff',
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="content text-bold" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					详情
				</view>
				<view class="action" @tap="$wanlshop.on('/pages/index')">
					<text class="iconfont icon-ipr_shouye text-bold" style="font-size: 44rpx;"></text>
				</view>
			</view>
		</view>

		<view class="banner">
			<u-swiper :list="bannerList" height="422" border-radius='0' indicator-pos="bottomRight"
				mode="number"></u-swiper>
		</view>

		<view class="conter">
			<view class="conterTitle">{{listString.title}}</view>
			<view class="conterMoney">￥{{listString.price}}</view>
			<view class="conterList">
				<view class="conterListItem" v-for="(itm,idx) in listString.receiver" :key='idx'>{{itm}}</view>
			</view>
			<view class="conterList1">
				<view class="conterListItem1" v-for="(itm,idx) in listString.service" :key='idx'>
					<view class="iconfont icon-xuanze"></view>
					<view class="itemText">{{itm}}</view>
				</view>
			</view>
		</view>
		<!-- <view class="evaluate bg-white padding-lr">
			<view class="head flex justify-between align-center">
				<text>用户评价</text>
				<view class="more flex justify-end align-center" @tap="$wanlshop.to(`/pages/medicalcare/homemaking/comment?id=${id}&t=4`)">
					<text>更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="wanl-gray text-sm text-center padding-bottom padding-top-lg" v-if="listData.length == 0">暂无评论</view>
			<scroll-view class="list flex justify-start align-center" scroll-x="true" scroll-left="0">
				<view class="item" v-for="(data,index) in listData" :key="index">
					<view class="top flex justify-between">
						<view class="left flex justify-start align-center">
							<image :src="$wanlshop.oss(data.user.avatar, 35, 35, 2, 'avatar')" mode="aspectFill"></image>
							<view class="name flex flex-direction">
								<text>{{data.user.username}}</text>
								<wanl-rate normal="#cccccc" :size="12" :current="data.score" :disabled="true" />
							</view>
						</view>
						<view class="times"> {{data.createtime_text.split(' ')[0]}}发表 </view>
					</view>
					<view class="text text-cut-2">{{data.content}}</view>
					<view class="images">
						<image :src="$wanlshop.oss(item)" mode="aspectFill" v-for="(item,index) in data.images_text" :key="index"></image>
					</view>
				</view>
			</scroll-view>
		</view> -->
		<view class="bg-white margin-top-sm padding-lr evaluate" style="padding-top: 20rpx;">
			<view class="head flex justify-between align-center">
				<text>客户评价</text>
				<view class="more" @tap="$wanlshop.to(`/pages/medicalcare/homemaking/comment?id=${id}&t=4`)">
					<text>更多</text>
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="wanl-gray text-sm text-center padding-bottom padding-top-lg" v-if="listData == 0">暂无评论</view>
			<block v-for="(data,index) in listData" :key="index">
				<view class="l" :key="index" v-if="index < 3">
					<view class="info flex justify-start align-center">
						<image :src="$wanlshop.oss(data.user.avatar, 35, 35, 2, 'avatar')" mode="aspectFill"></image>
						<text>{{data.user.nickname}}</text>
						<text>{{data.createtime_text}}</text>
						<uni-rate :max="5" :value="data.score" :size="12" color="#CCCCCC" active-color="#4CBD66"/>
					</view>
					<view class="text"> {{data.content}} </view>
					<view class="img">
						<image @tap="$wanlshop.previewImage(data.images_text,k)" :src="$wanlshop.oss(item)" v-for="(item,k) in data.images_text" :key="k" mode="aspectFill"></image>
					</view>
				</view>
			</block>
		</view>
		<view class="conter">
			<view class="conterText">医养院简介：<view><u-parse :html="listString.desc"></u-parse></view></view>
			<view class="address">
				<view class="iconfont icon-dingweixiao"></view>
				<view class="itemText2">地址</view>
				<view class="itemText3" @click="cilckLocation">{{listString.address}}</view>
				<view class="iconfont icon-dianpudaohang" @click="cilckLocation"></view>
				<view class="hx"></view>
				<view class="iconfont icon-31dianhua" @click="cilckPhone"></view>
			</view>
		</view>

		<view class="conter">
			<view class="conterTitle1">补充说明</view>
			<view class="conterParse">
				<u-parse :html="listString.supplement"></u-parse>
			</view>
		</view>

		<view class="zw"></view>
		<view class="footer">
			<view class="footerBtn" @click="$wanlshop.to('/pages/Medical/consult?id=' + id)">立即咨询</view>
			<view class="footerBtn" @click="SubmitData('placeOrder')">立即下单</view>
		</view>


		<!-- 规格 -->
		<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="option wanl-modal">
					<view class="head text-left padding-bj solid-bottom">
						<view class="cu-avatar radius-bock margin-right"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(listString.image, 100, 100) + ')' }">
						</view>

						<view>
							<view class="text-price wanl-orange text-xl margin-bottom-xs">
								{{price?price: listString.price }}
							</view>
							<!-- <view class="wanl-gray margin-bottom-xs">
								已售 <text class="margin-lr-xs">{{ listString.sale }}</text> 件
							</view> -->
							<view class="text-sm" v-if="name">
								<view>
									<text class="margin-right-bj">已选择</text>
									<text class="margin-right-xs">{{ name }}</text>
								</view>
							</view>
						</view>

						<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
					</view>
					<!-- 1.0.8升级 -->
					<scroll-view scroll-y="true" :style="{maxHeight: wanlsys.screenHeight / 2 + 'px'}">
						<view class="opt text-left padding-bj solid-bottom">
							<!-- <view class="text-df">{{ value.name }}</view> -->
							<view class="tag">
								<view class="cu-tag text-sm" v-for="(item, index) in listString.sku" :key="index"
									:class="[cur == index ? 'active' : '']" @tap="skuClick(item, index)">
									{{ item.asprice }}
								</view>
							</view>
						</view>
						<view class="number padding-bj">
							<view class="text-df">购买数量</view>
							<uni-number-box :min="1" :value="selectNum" :disabled="canCount"
								@change="changeNum"></uni-number-box>
						</view>
					</scroll-view>
					<view class="foot padding-lr-bj">
						<button v-if="isChoice" class="cu-btn bg-green round text-bold complete"
							@tap="addOrder">完成</button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				bannerList: [],
				selectNum: 1, //选中数量
				wanlsys: {},
				listString: {
					address: '',
					content: '',
					crew_num: '',
					duration: '',
					mobile: '',
					latitude: "",
					longitude: "",
					mobile: "",
					principal: "",
					starttime: "",
					title: "",
					id: '',
					starttime: '',
					deadline: '',
					sku: []
				},
				cur: null,
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				modalName: null, // 弹出层
				isChoice: '', // 是否从选择进入
				name: null, // 选择规格名称
				price: null,
				id:'',
				listData:[],
				total:0
				
			}

		},
		computed: {
			canCount() {
				return this.subIndex.some(item => item === -1);
			}
		},
		onLoad(e) {
			this.id = e.id
			this.postDetail(e.id)
		},
		methods: {
			// 导航
			cilckLocation() {
				console.log(this.listString)
				var that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = Number(that.listString.latitude);
						const longitude = Number(that.listString.longitude);
						uni.openLocation({
							name: that.listString.address,
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			cilckPhone() {
				uni.makePhoneCall({
					phoneNumber: this.listString.mobile //仅为示例
				});
			},
			async postDetail(id) {
				await uni.request({
					url: '/addons/nursing/api.index/detail',
					data: {
						id: id
					},
					method: 'POST',
					success: res => {
						console.log("详情", res)
						this.bannerList = res.data.images || []
						this.listString = res.data
					}
				});
				await uni.request({
					url: '/addons/nursing/api.comment/lists',
					data: {
						type: 4, // 评论类型，1=家政服务,2=医护上门,3=陪诊陪护,4=医养院,5=长护险
						goods_id: id,
						page: 1,
						state: 0
					},
					success: res => {
						this.listData = res.data.data.length > 0 ? [res.data.data[0]] : [];
						this.total = res.data.total;
					}
				});
			},
			addOrder() {
				if (this.cur == null) {
					this.$wanlshop.msg('请选择规格')
				} else {
					this.$wanlshop.to(
						`/pages/Medical/addRecord?id=${this.listString.id}&num=${this.selectNum}&address_id=0&cur=${this.cur}`
						);
				}
			},
			//商品规格修改数量
			changeNum(val) {
				this.selectNum = parseInt(val);
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			// 提交数据
			SubmitData(name, type) {
				if (type == 1) {
					this.isChoice = name;
					this.ProcessingData();
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 商品规格组合 选择
			skuClick(value, index) {
				console.log(value)
				this.cur = index
				this.sku_id = value.id
				this.name = value.name
				this.price = value.price
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ededed;
		height: 100%;
	}

	.wanlshop-container {
		background-repeat: no-repeat;

		&__head {
			position: relative;
			z-index: 99;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 220rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: transparent;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
						color: #fff;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}

		}

	}

	.wanlshop-container__head .navigater .search {
		border: 3rpx solid #4CBD66;
	}

	.wanl-list .bar {
		background-color: #fff;
		margin: 20rpx 0;
		justify-content: space-around;
	}

	.banner {
		width: 100%;
		height: 422rpx;
	}

	.conter {
		padding: 12rpx 30rpx 26rpx 30rpx;
		background: #fff;
		margin-top: 20rpx;

		.conterTitle {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.conterTitle1 {
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.conterMoney {
			margin-top: 6rpx;
			font-size: 38rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #E31F1F;
		}

		.conterList {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;

			.conterListItem {
				padding: 4rpx 10rpx;
				border-radius: 6rpx;
				border: 2rpx solid #4CBD66;
				color: #4CBD66;
				margin-right: 12rpx;
				margin-top: 12rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
			}

		}

		.conterList1 {
			width: 100%;
			height: auto;
			display: flex;
			flex-wrap: wrap;
			background: #F4F4F4;
			border-radius: 6rpx;
			margin-top: 20rpx;

			.conterListItem1 {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 20rpx;
					margin-left: 16rpx;
				}

				.itemText {
					font-size: 26rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #888888;
					margin-left: 10rpx;
					margin-right: 24rpx;
				}
			}
		}

		.conterText {
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: bold;
			color: #333333;

			view {
				font-weight: 500;
				color: #666;
			}
		}

		.address {
			display: flex;
			align-items: center;
			margin-top: 14rpx;

			.icon-dingweixiao {
				color: #4CBD66;
				font-size: 26rpx;
			}

			.itemText2 {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #4CBD66;
				margin-left: 8rpx;
			}

			.itemText3 {
				width: 490rpx;
				height: auto;
				margin-left: 16rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
			}

			.hx {
				width: 2rpx;
				height: 36rpx;
				background: #555555;
				margin: 0 12rpx;
			}

			.icon-dianpudaohang {
				margin-left: auto;
			}
		}

		.conterParse {
			margin-top: 16rpx;
		}
	}

	.zw {
		width: 100%;
		height: 206rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 136rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		display: flex;
		align-items: center;


		.footerBtn {
			width: 40%;
			height: 80rpx;
			background: #4CBD66;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
			margin: 30rpx auto;
			color: #fff;
		}
	}

	.sku {
		flex-wrap: nowrap;
		white-space: nowrap;

		.item {
			display: inline-flex;
			height: 118rpx;
			background: #F4F4F4;
			border-radius: 6rpx;
			margin-right: 20rpx;
			padding: 0 14rpx;
			justify-content: center;

			&:last-child {
				margin-right: 0;
			}

			.title {
				display: inline-block;
				font-size: 38rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 54rpx;
			}

			.price {
				margin-top: 2rpx;
				color: #E31F1F;

				text {
					&:nth-child(1) {
						font-size: 32rpx;
						font-weight: bold;
					}

					&:nth-child(2) {
						font-size: 22rpx;
					}
				}
			}

			&.cur {
				background-color: #bcf4be;
			}
		}
	}
	.l {
		margin-top: 24rpx;
		padding-bottom: 20rpx;
		.info {
			image {
				width: 46rpx;
				height: 46rpx;
				border-radius: 50rpx;
			}
			text {
				display: inline-block;
				&:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #444444;
					line-height: 40rpx;
					margin-left: 18rpx;
				}
				&:nth-child(3) {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #888888;
					line-height: 34rpx;
					margin-left: 16rpx;
					margin-right: 46rpx;
				}
			}
		}
		.text {
			margin-top: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #888888;
			line-height: 28rpx;
			padding-left: 64rpx;
		}
		.img {
			margin-top: 10rpx;
			padding-left: 64rpx;
			image {
				margin-left: 10rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>